
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { BookOpen } from "lucide-react";
import { useRole } from "@/contexts/RoleContext";

export function LearningStyleResults() {
  const { role } = useRole();

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-lg">
          <BookOpen className="w-5 h-5 text-blue-600" />
          {role === 'teacher' ? 'Teaching Philosophy Analysis' : 'Learning Style Analysis'}
        </CardTitle>
        <CardDescription>Assessment completed on April 20, 2025</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
            <h4 className="font-semibold text-lg mb-2 text-blue-900">
              {role === 'teacher' ? 'Constructivist Educator' : 'Visual Learner'}
            </h4>
            <p className="text-sm text-blue-700 mb-3">
              {role === 'teacher' 
                ? "You believe students learn best through hands-on experiences and collaborative discovery. Your teaching approach emphasizes student-centered learning and critical thinking development."
                : "You process information most effectively through visual aids, diagrams, and spatial arrangements. Your brain excels at pattern recognition and visual memory."
              }
            </p>
            <div className="flex flex-wrap gap-2">
              {role === 'teacher' ? (
                <>
                  <Badge variant="secondary" className="bg-blue-100 text-blue-800">Project-Based Learning</Badge>
                  <Badge variant="secondary" className="bg-blue-100 text-blue-800">Collaborative Groups</Badge>
                  <Badge variant="secondary" className="bg-blue-100 text-blue-800">Inquiry-Based</Badge>
                </>
              ) : (
                <>
                  <Badge variant="secondary" className="bg-blue-100 text-blue-800">Charts & Graphs</Badge>
                  <Badge variant="secondary" className="bg-blue-100 text-blue-800">Mind Maps</Badge>
                  <Badge variant="secondary" className="bg-blue-100 text-blue-800">Color Coding</Badge>
                </>
              )}
            </div>
          </div>
          
          <div className="space-y-2">
            <h5 className="font-medium">
              {role === 'teacher' ? 'Personalized Teaching Strategies:' : 'Personalized Learning Strategies:'}
            </h5>
            <ul className="text-sm text-muted-foreground space-y-1 ml-4">
              {role === 'teacher' ? (
                <>
                  <li>• Design hands-on activities and real-world problem-solving tasks</li>
                  <li>• Facilitate group discussions and collaborative projects</li>
                  <li>• Ask open-ended questions to stimulate critical thinking</li>
                  <li>• Create environments where students build knowledge together</li>
                </>
              ) : (
                <>
                  <li>• Create visual summaries and infographics for complex topics</li>
                  <li>• Use mind maps and flowcharts to organize information</li>
                  <li>• Watch educational videos and interactive tutorials</li>
                  <li>• Apply color-coding systems in your notes and materials</li>
                </>
              )}
            </ul>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
